<!DOCTYPE html>
<html lang="Zh-CN">
<head>
  <meta charset="utf-8">
  <title>24-ConfirmBox</title>
  <!-- Link CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="modal-box">
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#mymodal">
						VIEW MODAL
					</button>
					<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<button type="button" class="close" data-dismiss="modal" aria-label="close">
									<span>
										X
									</span>
								</button>
								<div class="modal-body">
									<div class="icon">
										!
									</div>
									<h3 class="title">ARE YOU SURE ?</h3>
									<p>
										学习使我快乐。学习使我快乐。学习使我快乐。<br>
										学习使我快乐。学习使我快乐。学习使我快乐。<br>
										学习使我快乐。学习使我快乐。学习使我快乐。<br>
										学习使我快乐。学习使我快乐。学习使我快乐。<br>
									</p>
									<button class="modal-cancel">取消</button>
									<button class="subscribe">确认</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>